<template>
    <aside class="sidebar" ref="navigation">
        <div class="scrollbar-inner">
            <div class="user">
                <div class="user__info" data-toggle="dropdown">
                    <img alt="" class="user__img" src="/static/demo/img/profile-pics/8.jpg">
                        <div>
                            <div class="user__name">
                                Malinda Hollaway
                            </div>
                            <div class="user__email">
                                malinda-h@gmail.com
                            </div>
                        </div>
                    </img>
                </div>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="index.html">
                        View Profile
                    </a>
                    <a class="dropdown-item" href="index.html">
                        Settings
                    </a>
                    <a class="dropdown-item" href="index.html">
                        Logout
                    </a>
                </div>
            </div>
            <ul class="navigation">
                <li :class="{'navigation__active': $route.name == 'home'}">
                    <router-link to="/home">
                        <i class="zmdi zmdi-home">
                        </i>
                        Home
                    </router-link>
                </li>
                <li class="navigation__sub @@variantsactive">
                    <a>
                        <i class="zmdi zmdi-view-week">
                        </i>
                        Variants
                    </a>
                    <ul>
                        <li :class="{'navigation__active': $route.name == 'hidden-sidebar'}">
                            <router-link to="hidden-sidebar">
                                Hidden Sidebar
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'boxed-layout'}">
                            <router-link to="boxed-layout">
                                Boxed Layout
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'hidden-sidebar-boxed-layout'}">
                            <router-link to="hidden-sidebar-boxed-layout">
                                Boxed Layout with Hidden Sidebar
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'top-navigation'}">
                            <router-link to="top-navigation">
                                Top Navigation
                            </router-link>
                        </li>
                    </ul>
                </li>
                <li :class="{'navigation__active': $route.name == 'typography'}">
                    <router-link to="typography">
                        <i class="zmdi zmdi-format-underlined">
                        </i>
                        Typography
                    </router-link>
                </li>
                <li :class="{'navigation__active': $route.name == 'widgets'}">
                    <router-link to="widgets">
                        <i class="zmdi zmdi-widgets">
                        </i>
                        Widgets
                    </router-link>
                </li>
                <li class="navigation__sub @@tableactive">
                    <a>
                        <i class="zmdi zmdi-view-list">
                        </i>
                        Tables
                    </a>
                    <ul :style="{display: $route.path.lastIndexOf('table') > -1 ? 'block' : 'none'}">
                        <li :class="{'navigation__active': $route.name == 'html-table'}">
                            <router-link to="html-table">
                                HTML Table
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'data-table'}">
                            <router-link to="data-table">
                                Data Table
                            </router-link>
                        </li>
                    </ul>
                </li>
                <li class="navigation__sub @@formactive">
                    <a>
                        <i class="zmdi zmdi-collection-text">
                        </i>
                        Forms
                    </a>
                    <ul :style="{display: $route.path.lastIndexOf('form') > -1 ? 'block' : 'none'}">
                        <li :class="{'navigation__active': $route.name == 'form-elements'}">
                            <router-link to="form-elements">
                                Basic Form Elements
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'form-components'}">
                            <router-link to="form-components">
                                Form Components
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'form-validation'}">
                            <router-link to="form-validation">
                                Form Validation
                            </router-link>
                        </li>
                    </ul>
                </li>
                <li class="navigation__sub @@uiactive">
                    <a>
                        <i class="zmdi zmdi-swap-alt">
                        </i>
                        User Interface
                    </a>
                    <ul>
                        <li :class="{'navigation__active': $route.name == 'colors'}">
                            <router-link to="colors">
                                Colors
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'css-animations'}">
                            <router-link to="css-animations">
                                CSS Animations
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'buttons'}">
                            <router-link to="buttons">
                                Buttons
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'icons'}">
                            <router-link to="icons">
                                Icons
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'listview'}">
                            <router-link to="listview">
                                Listview
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'toolbars'}">
                            <router-link to="toolbars">
                                Toolbars
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'cards'}">
                            <router-link to="cards">
                                Cards
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'alerts'}">
                            <router-link to="alerts">
                                Alerts
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'badges'}">
                            <router-link to="badges">
                                Badges
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'breadcrumbs'}">
                            <router-link to="breadcrumbs">
                                Bredcrumbs
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'jumbotron'}">
                            <router-link to="jumbotron">
                                Jumbotron
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'navs'}">
                            <router-link to="navs">
                                Navs
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'pagination'}">
                            <router-link to="pagination">
                                Pagination
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'progress'}">
                            <router-link to="progress">
                                Progress
                            </router-link>
                        </li>
                    </ul>
                </li>
                <li class="navigation__sub @@componentsactive">
                    <a>
                        <i class="zmdi zmdi-group-work">
                        </i>
                        Javascript Components
                    </a>
                    <ul class="navigation__sub">
                        <li :class="{'navigation__active': $route.name == 'carousel'}">
                            <router-link to="carousel">
                                Carousel
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'collapse'}">
                            <router-link to="collapse">
                                Collapse
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'dropdowns'}">
                            <router-link to="dropdowns">
                                Dropdowns
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'modals'}">
                            <router-link to="modals">
                                Modals
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'popover'}">
                            <router-link to="popover">
                                Popover
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'tabs'}">
                            <router-link to="tabs">
                                Tabs
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'tooltips'}">
                            <router-link to="tooltips">
                                Tooltips
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'notifications-alerts'}">
                            <router-link to="notifications-alerts">
                                Notifications & Alerts
                            </router-link>
                        </li>
                    </ul>
                </li>
                <li class="navigation__sub @@chartsactive">
                    <a>
                        <i class="zmdi zmdi-trending-up">
                        </i>
                        Charts
                    </a>
                    <ul>
                        <li :class="{'navigation__active': $route.name == 'flot-charts'}">
                            <router-link to="flot-charts">
                                Flot
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'other-charts'}">
                            <router-link to="other-charts">
                                Other Charts
                            </router-link>
                        </li>
                    </ul>
                </li>
                <li :class="{'navigation__active': $route.name == 'calendar'}">
                    <router-link to="calendar">
                        <i class="zmdi zmdi-calendar">
                        </i>
                        Calendar
                    </router-link>
                </li>
                <li :class="{'navigation__active': $route.name == 'photo-gallery'}">
                    <router-link to="photo-gallery">
                        <i class="zmdi zmdi-image">
                        </i>
                        Photo Gallery
                    </router-link>
                </li>
                <li class="navigation__sub @@samplepagesactive">
                    <a>
                        <i class="zmdi zmdi-collection-item">
                        </i>
                        Sample Pages
                    </a>
                    <ul>
                        <li :class="{'navigation__active': $route.name == 'profile-about'}">
                            <router-link to="profile-about">
                                Profile
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'messages'}">
                            <router-link to="messages">
                                Messages
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'contacts'}">
                            <router-link to="contacts">
                                Contacts
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'groups'}">
                            <router-link to="groups">
                                Groups
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'pricing-tables'}">
                            <router-link to="pricing-tables">
                                Pricing Tables
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'invoice'}">
                            <router-link to="invoice">
                                Invoice
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'todo-lists'}">
                            <router-link to="todo-lists">
                                Todo Lists
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'notes'}">
                            <router-link to="notes">
                                Notes
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'login'}">
                            <router-link to="login">
                                Login & SignUp
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'lockscreen'}">
                            <router-link to="lockscreen">
                                Lockscreen
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == '404'}">
                            <router-link to="404">
                                404
                            </router-link>
                        </li>
                        <li :class="{'navigation__active': $route.name == 'empty'}">
                            <router-link to="empty">
                                Empty Page
                            </router-link>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </aside>
</template>
<script>
export default {
  name: 'sidebar',
  mounted() {
  	$(this.$el).on("click", ".navigation__sub > a", function(a) {
        a.preventDefault(), $(this).parent().toggleClass("navigation__sub--toggled"), $(this).next("ul").slideToggle(250)
    });
  }
}
</script>
<style>
</style>
